<template>
    <div class="primaryWiring">
        <nu-row class="row" :gutter="20">
            <nu-col :span="5" class="col">
                <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="false"
                    node-key="id" :default-expanded-keys="tenantIdMenus" ref="treeRef" :highlight-current="true"
                    :current-node-key="currentNodekey"></el-tree>
            </nu-col>
            <nu-col :span="19" class="col">
                <svg-icon icon-class="Background" class="icon"></svg-icon>
            </nu-col>
        </nu-row>
    </div>
</template>
<script>
import nuCol from "@/components/base/col.vue"
import nuRow from "@/components/base/row.vue"
export default {
    name: "primaryWiring",
    components: { nuCol, nuRow },
    data() {
        return {
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            tenantIdMenus: ['01'],
            currentNodekey: ''
        }
    },
    mounted() {
        this.getPrimaryWiringDiagramTreeData()
    },
    computed: {

    },
    methods: {
        /**
         * 单击tree节点
         * @param {*} data 
         */
        handleNodeClick(data) {
            console.log(data);
        },
        /**
         * 获取一次接线图tree数据
         */
        getPrimaryWiringDiagramTreeData() {
            this.$httpGet(window.api.primaryWiringDiagramTreeData).then(res => {
                if (res.success && res.data) {
                    this.treeData = res.data;
                    this.currentNodekey = res.data[0].children[0].children[0].id;
                    this.$nextTick(() => {
                        this.$refs.treeRef.setCurrentKey(this.currentNodekey);
                    });
                } else {
                    this.treeData = []
                }
            }).catch(err => {
                this.treeData = []
            });
        }
    },
}
</script>
<style scoped lang="scss">
.primaryWiring {
    height: calc(100vh - 80px);
}

.row {
    height: calc(100% - 20px);
}

.col {
    height: 100%;
}

.el-tree {
    height: calc(100% - 10px);
    padding: 10px;
}

.svg-icon {
    width: 100%;
    height: 99%;
}

.el-tree ::v-deep {
    .el-tree-node__content {
        position: relative;
    }

    //竖线
    .el-tree-node:last-child>.el-tree-node__content::before {
        content: "";
        width: 1px;
        height: 10000px;
        border-width: 1px;
        border-left: 1px solid #52627c;
        position: absolute;
        margin-left: -9px;
        bottom: 13px;
    }

    //横线
    .el-tree-node__children .el-tree-node__content::after {
        content: "";
        width: 13px;
        height: 1px;
        border-width: 1px;
        border-top: 1px solid #52627c;
        position: absolute;
        margin-left: -9px;
    }

    .el-tree-node__content>.el-tree-node__expand-icon {
        padding: 6px 3px;
    }

    .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    //有子节点 且未展开
    .el-icon-caret-right:before {
        background: url("../../assets/images/tree_1.png") no-repeat 0;
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        font-size: 16px;
        background-size: 16px;
    }

    //有子节点 且已展开
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        background: url("../../assets/images/tree_2.png") no-repeat 0;
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        font-size: 16px;
        background-size: 16px;
    }

    //没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
        background: url("../../assets/images/tree_2.png") no-repeat 0;
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        font-size: 16px;
        background-size: 16px;
    }

    /* 点击树结构项的选中颜色 */
    .el-tree--highlight-current .is-current.el-tree-node>.el-tree-node__content {
        background-color: #99ccff !important;
    }
}
</style>
